<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			background-image: url(images/bg.jpg);
			background-size: 100% 100%;
		}
		.teamModify{
			padding: 20px;
			background-color: #fff;
			box-sizing: border-box;
			position: absolute;
			opacity: 0.97;
			z-index: 9999;
			border: 3px solid #2464b5;
			/*display:none;*/
		}
		.teamModify>p{
			display: inline-block;
			width: 100%;
			position: relative;
		}
		.teamModify>p span{
			display: inline-block;
			float: right;
			color: #bbb;
			position: absolute;
			bottom: 0px;
			right: 0px;
			cursor: pointer;
		}
		.teamModify>p span:hover{
			color: red;
		}
		.teamModify table{
			margin: 20px auto;
		}
		.teamModify table tr td:nth-of-type(1){
			text-align: right;
		}
		#file{
			display: none;
		}
		.teamModify form p{
			text-align: right;
		}
		.teamModify form p input{
			background-color:#ccc;
			color: #2464b5;
			font-weight: bold;
			box-sizing: border-box;
			margin-right:10px;
		}
		.teamModify form p input:hover{
			background-color:#2464b5;
			color: #fff;
		}		
	</style>
</head>
<body>
	<div class="box">
			<!-- 球队修改 -->
		<div class="teamModify">
			<p>
				修改球队
				<span onclick="tobghome()">×</span>
			</p>
			<form action="TeamServlet.do?opt=3&teamId=${param.teamId }" method="post" enctype="multipart/form-data" >
				<table>
					<tr>
						<td>球队:</td>
						<td><input type="text" name="teamName" value="${param.teamName }"></td>
					</tr>
					<tr>
						<td>城市:</td>
						<td><input type="text" name="teamRegion" value="${param.teamRegion }"></td>
					</tr>
					<tr class="fileTr">
						<td>队徽:</td>
						<td>
							<input type="file" name="teamUrl" id="file" onchange="showPic(this)">
							<img src="${param.teamUrl}" id="addImg" onclick="fileClick(this)">
						</td>
					</tr>
					<tr>
						<td>主教练:</td>
						<td><input type="text" name="teamCoach" value="${param.teamCoach }"></td>
					</tr>
					<tr>
						<td>球馆:</td>
						<td><input type="text" name="teamStadium" value="${param.teamStadium}"></td>
					</tr>
					<tr>
						<td>联盟:</td>
						<td>
							<select id="union" name="unionName" value="${param.unionName }">
								<option value="0">-请选择-</option>
							</select></td>
					</tr>
					<tr>
						<td>分区:</td>
						<td>
							<select id="partition" name="partitionName" value="${param.partitionName }"> 
								<option value="0">-请选择-</option>
							</select>
						</td>
					</tr>
	
				</table>
				<p class="submitP">
					<input type="button" name="" value="取消" onclick="tobghome()">
					<input type="submit" name="" value="确定">
				</p>
			</form>	
		</div>
</body>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/bghome.js"></script>
<script type="text/javascript">
	function $$(id){
		return document.getElementById(id);
	}
	function fileClick(o){
		o.previousElementSibling.click();
	}
	var unionArrays = new Array();
	unionArrays["东部"]=["东南","大西洋","中央"];
	unionArrays["西部"]=["西南","西北","太平洋"];
	
	window.onload=init();
	function init(){
		for(var i in unionArrays){
			$$("union").add(new Option(i,i),null);
		}
	}

	$$("union").onchange=function(){
		$$("partition").length= 1;
		var classVal =this.value;	
		for(var i in unionArrays){
			if(classVal == i){
				for(var j in unionArrays[i]){
					$$("partition").add(new Option(unionArrays[i][j],unionArrays[i][j]),null);//二维数组
				}
			}
		}
	}
	function showPic(obj) {
        var fileUrl = getObjectURL(obj.files[0]);

		console.log(fileUrl);
        if (fileUrl != null) {
            obj.nextElementSibling.src = fileUrl;
            
        }else{
        	 obj.nextElementSibling.src="images/add.jpg"
        }
    }
    //建立一个可存取到该file的url
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) {   // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {        // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {  // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url;

      }
    function tobghome(){
		window.location.href="/nba/SearchServlet.do"
	}
</script>
</html>